<!DOCTYPE html>
<html lang="en">
<style>
pre {
    background: #EEE;
    border: 1px solid #CCC;
    padding: 10px;
}
#page-wrapper {
    border-top: 0px solid #CCC;
    margin: 1em auto;
    width: 600px;
}
</style>

<script>
window.onload = function() {
    function $(selector) {
        return document.querySelector(selector);
    }
    
    var socket = new WebSocket('ws://127.0.0.1:7890');
    socket.onopen = function(event) {
        $('#messages').innerHTML = 'Connected<br>';
    };
    socket.onmessage = function(event) {
        $('#messages').innerHTML = '<br>' + event.data + '<br>';
    };
    socket.onclose = function(event) {
        $('#messages').innerHTML = 'Disconnected ' + event.reason;
    };

    $('#btnOne').onclick = function(e) {
        socket.send("t");
    };
    
    $('#btnStart').onclick = function(e) {
		socket.send($('#autoHz').value);
        socket.send("a");
    };
    
    $('#btnStop').onclick = function(e) {
        socket.send("s");
    };

    $('#autoHz').value = "1";   
};
</script>

<div id="page-wrapper">
	<img border="0" src="ok.png" width="350" alt="OpenKAI">
    <pre id="messages">Connecting...</pre>
    
    <button id="btnOne" style="WIDTH:150px; HEIGHT: 50px">Take One Shot</button>
    </br></br>    
    <button id="btnStart" style="WIDTH: 150px; HEIGHT: 50px">Start Interval</button>
    <button id="btnStop" style="WIDTH: 150px; HEIGHT: 50px">Stop</button>
    </br></br>
    <input id="autoHz" style="WIDTH: 100px; HEIGHT: 50px">Hz (1~9Hz)
    </br></br>
</div>

